<template>
  <div style="width: 100%;height: 100%;">
    <Echart
      :options="options"
      :id="id"
      height="100%"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  export default {
    data () {
      return {
        options: {},
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      },
      id: {
        type: String
      }
    },
    watch: {
      cdata: {
        handler (newData) {
          this.options = {
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)"
            },
            legend: {
              orient: "vertical",
              y: "center",
              right: "6%",
              data: newData.xData,
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: [10, 50],
                roseType: "radius",
                center: ["40%", "50%"],
                label: {
                  normal: {
                    show: true,
                    formatter: '{d}%'
                    // formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                  }
                },
                data: newData.seriesData
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
